// 线性渐变mixin参考网站：https://www.sitepoint.com/building-linear-gradient-mixin-sass/
// 三角型mixin参考网站：https://www.sitepoint.com/sass-mixin-css-triangles/

/// 清除浮动
@mixin clearFloat {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

/// 设置元素宽高
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin backgroundImage($url) {
  background-image: url($url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/// 设置元素撑满父容器
@mixin full-size {
  @include size(100%, 100%)
}

/// 设置字体大小
@mixin font-size($size) {
  font-size: $size;
  line-height: $size * $line-height-base;
}

/// 设置元素边框
@mixin border-solid($color: $border-color-main, $size: 1px) {
  border: $size solid $color;
}

@mixin border-dashed($color: $border-color-main, $size: 2px) {
  border: $size dashed $color;
}

/// 设置文本当行显示且溢出隐藏
@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/// flex布局 - 垂直水平居中
@mixin flex-row($main-axis: flex-start, $cross-axis: flex-start, $wrap: nowrap) {
  display: flex;
  justify-content: $main-axis;
  align-items: $cross-axis;
  flex-wrap: $wrap;
}

@mixin flex-column($main-axis: flex-start, $cross-axis: flex-start, $wrap: nowrap) {
  display: flex;
  justify-content: $cross-axis;
  align-items: $main-axis;
  flex-direction: column;
  flex-wrap: $wrap;
}